<template>
  <div class="classification-table">
      <el-table ref="dragTable" :data="listdata" border style="width: 100%">
        <el-table-column label="编号" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图标" width="120" align="center">
          <template slot-scope="{row}">
              <img class="userHead" :src="row.icon" alt="图片加载失败" v-if="/^http:/i.test(row.icon)">
              <i v-else class="el-icon-picture" style="font-size:20px"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <el-tag type="success" v-if="!(row.status - 1)">启用</el-tag>
            <el-tag  type="info" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  name: 'classificationTable',
  props: {
    // 父组件传递的列表数据
    listdata: {
        type: Array,
        default: []
    }
  },
  data(){
    return {
      currentList: {
        title: "修改分类",
        list: {}
      },
      sortable: null,
      oldList: [],
      newList: [],
      sort: {
        currId: 0,
        newId: 0,
        currSort: 0,
        newSort: 0
      }
    }
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },

    // 编辑
    handleEdit(index, row){
      this.currentList.list = row
      this.$emit('modifyFrom', this.currentList)
    },

    // 删除
    handleDelete(index, row){
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        
        if(row.status == 1){
          this.$alert('该分类已被启用，无法删除!', '提示', {
            confirmButtonText: '确定'
          });
          return;
        }
        this.$http({
            method: 'delete',
            url: `/backend/api/cate/${row.id}`,
        }).then(res => {
            this.$emit('refreshList')
            this.$message({
              message: '删除成功',
              type: 'success'
            });
        }).catch(err=>{
            this.$message({
              message: '删除失败,请重试',
              type: 'warning'
            });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    //拖拽
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // 停靠位置样式（要拖动的元素的样式，给拖动的元素添加类名，自己再css中设置样式）
        setData: function(dataTransfer, dragEl) { // 避免 Firefox 的bug
          dataTransfer.setData('Text', dragEl.textContent)
        },
        onEnd: evt => {
          let oldList = this.listdata[evt.oldIndex];
          let newList = this.listdata[evt.newIndex];
          this.sort = {  
            currId: oldList.id,
            newId: newList.id,
            currSort: oldList.sort,
            newSort: newList.sort
          }
          this.$emit('sortList', this.sort)
        }
      })
    }
  },
  mounted(){
    this.setSort()
  },
  watch: {
    listdata(){
      console.log('ok')
      this.oldList = this.listdata.map(v => v.id)
      this.newList = this.oldList.slice()
      this.$nextTick(() => {
        this.setSort()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userHead{
  width: 65px;
  height: 65px;
  border: 50%;
  margin: auto;
}
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>